<style>
	page{
		background: #fafafa;
	}
    .m-header-line {
        border: 1rpx solid #e5e5e5;
    }
	
    .red {
        background: #ff413e;
    }

    .orange {
        background: #ff9b12;
    }

    .blue {
        background: #33b7e7;
    }

    .purple {
        background: #917be4;
    }

    .gray {
        background: #4b4b4b;
    }

    .g-content-box {
        width: 100%;
        overflow: hidden;
		padding-bottom: 100rpx;
    }

    .m-log {
        width: 90%;
        margin: 0 auto;
        height: 100%;
    }

    .m-log-list {
        width: 100%;
		position: relative;
		padding-top: 20rpx;
    }

    .m-log-line {
		position: absolute;
		top: 26rpx;
        width: 6rpx;
        height: 37rpx;
        margin-right: 42rpx;
    }

    .m-log-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
        width: 92%;
		margin-left: 40rpx;
		padding-bottom: 20rpx;
        border-bottom: 1px solid #e5e5e5;
    }

    .u-log-title {
        font-size: 32rpx;
    }

    .u-log-date {
        font-size: 24rpx;
        color: #aaa;
    }

    .m-log-info-r .money{
        font-size: 32rpx;
        font-weight: bold;
		text-align: right;
    }
	
	.m-log-info-r .havemoney{
	    font-size: 24rpx;
		text-align: right;
	}
	
    .f-log-plus {
        color: #ff4e00;
    }

    .f-log-minus {
        color: #4b4b4b;
		font-weight: bold;
    }

    .g-frame {
        width: 581rpx;
        height: 729rpx;
        background: #fff;
        border-radius: 20rpx;
        position: fixed;
        top: 20%;
        overflow: hidden;
        left: 12%;
		z-index: 12;
    }

    .g-frame-mask {
        background: #000;
        opacity: .5;
        height: 100vh;
        width: 100%;
        position: fixed;
        top: 0rpx;
		z-index: 11;
    }

    .m-frame-header {
        height: 110rpx;
        width: 100%;
        background: #d71311;
        border-top-right-radius: 20rpx;
        border-top-left-radius: 20rpx;
    }

    .u-frame-title {
        width: 60%;
        height: 100%;
        text-align: right;
        color: #fff;
        line-height: 110rpx;
        font-size: 32rpx;
        float: left;
    }

    .u-frame-close {
        float: right;
        width: 42rpx;
        height: 42rpx;
        background-size: 100%;
        position: relative;
        top: 34rpx;
        right: 32rpx;
    }

    .m-frame-content {
        width: 505rpx;
        margin: 0 auto;
        padding-top: 48rpx;
        height: 480rpx;
        overflow-y: auto;
    }

    .m-frame-date-box-t {
        height: 25rpx;
        margin-bottom: 16rpx;
    }

    .u-frame-date-line {
        float: left;
        width: 5rpx;
        height: 20rpx;
        background: #d71311;
        margin-right: 12rpx;
    }

    .u-frame-date-title {
        float: left;
        font-size: 26rpx;
        position: relative;
        top: -6rpx;
    }

    .m-frame-detail {
        overflow: hidden;
    }

    .m-date-l {
        height: 65rpx;
        border: 2rpx solid #e5e5e5;
        width: 235rpx;
        border-radius: 8rpx;
        display: inline-block;
    }

    .u-date {
        font-size: 28rpx;
        line-height: 65rpx;
        float: left;
        padding-left: 25rpx;
    }

    .u-date-icon {
        width: 26rpx;
        height: 27rpx;
        float: right;
        position: relative;
        right: 13rpx;
        top: 19rpx;
    }

    .m-date-line {
        background: #e7e7e7;
        width: 8rpx;
        height: 3rpx;
        float: left;
        position: relative;
        top: 31rpx;
        left: 12rpx;
        margin-right: 12rpx;
    }

    .m-date-r {
        float: right;
    }

    .m-frame-category .m-date-l {
        margin-bottom: 33rpx;
        margin-right: 26rpx;
    }

    .m-frame-category .m-date-l:nth-of-type(even) {
        margin-right: 0px;
    }

    .u-category {
        font-size: 28rpx;
        color: #a5a5a5;
        text-align: center;
        line-height: 65rpx;
    }

    .u-category-act {
        border: 2rpx solid #d71311;
    }

    .u-category-act .u-category {
        color: #d71311 !important;
    }

    .m-frame-footer {
        height: 97rpx;
        width: 100%;
        position: absolute;
        bottom: 0px;
        left: 0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
    }

    .m-frame-footer view {
		flex: 1;
        line-height: 97rpx;
        text-align: center;
        font-size: 32rpx;
    }

    .u-reset {
        color: #ff0000;
        background: #fff;
    }

    .u-confirm {
        background: #d71311;
        color: #fff;
        border-bottom-right-radius: 16rpx;
    }

    .m-frame-date-box-bottom2 {
        display: flex;
        justify-content: space-between;
    }

    .f-border1px {
        position: relative;
    }
	.kd-turn{
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		color: #ffffff;
		background: #d71611;
		text-align: center;
		font-size: 32rpx;
		padding: 25rpx 0;
	}
	.ture-content{
		font-size: 32rpx;
	}
	.ture-content .input{
		padding: 30rpx 0;
	}
	.ture-content .input input{
		width: 99%;
		font-size: 40rpx;
		text-align: center;
		border: 1px solid #828080;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}
	.ture-content .tips .red{
		color: #D71511;
		margin-right: 10rpx;
		background:none;
	}
	.ture-content .tips .icon{
		margin:0 10rpx;
	}
	.ture-content .num{
		font-size: 38rpx;
		color: #D71511;
	}
	.item-deital{
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -320rpx;
		background: #ffffff;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		width: 600rpx;
		padding: 20rpx;
		z-index: 12;
		animation:show .3s;
		animation-fill-mode:forwards;
	}
	.item-deital .order-title{
		color: #333333;
		padding: 10rpx 0;
		font-size: 32rpx;
	}
	.item-deital .price{
		color: #D71511;
		font-size: 36rpx;
		font-weight: bold;
	}
	.item-deital .fex{
		padding: 5rpx 0;
		font-size: 32rpx;
	}
	.deital-close{
		padding: 5px;
		border-radius: 100px;
		border: 3px solid #fff;
		position: absolute;
		bottom: -60px;
		left: 50%;
		transform: translateX(-50%);
	}
	@keyframes show  
    {  
        from {transform: translateY(-100%); }  
        to { transform: translateY(-50%);}  
    }  
	.allowance-foot{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.allowance-foot .fex{
		flex: 1;
	}
	.you-head{
		background-image: url(../../static/images/lottery_draw/you_head_bg.jpg);
		background-repeat: no-repeat;
		height: 190rpx;
		background-size: contain;
		display: flex;
		justify-content: center;
		text-align: center;
		color: #FFFFFF;
	}
	.you-head-item{
		margin-top: 20rpx;
		flex: 1;
		position: relative;
	}
	.you-head-item:first-child::after{
		content: '';
		position: absolute;
		top: 40rpx;
		right: 0;
		width: 2rpx;
		height: 44rpx;
		background-color: rgba(255,255,255,0.3);
	}
	.you-head-item .num{
		font-size: 38rpx;
	}
	.you-head-item .text{
		font-size: 32rpx;
	}
</style>
<template>
    <view>
        <view class="g-content-box">
			<view class="you-head" v-if="sendData.state == 8">
				<view class="you-head-item"><view class="num">{{youInfo.youpin||0}}</view><view class="text">余额</view></view>
				<navigator hover-class="none" open-type="navigate" url="/pages/user/hlb_bill?state=21" class="you-head-item" @tap="yesterday"><view class="num">{{youInfo.shouyi||0}}</view><view class="text">昨日收益</view></navigator>
			</view>
            <view class="m-log">
				<view class="m-log-list" v-for="(item, index) in data" :key="index">
					<view class="m-log-line" :class="[item.way_text=='收入' ? 'red' : 'gray']"></view>
					<view @tap="showDeital(item.id)" class="m-log-info">
						<view class="m-log-info-l">
							<view class="u-log-title">{{item.type_text}}({{item.is_accept_text}})</view>
							<view class="u-log-date">{{item.create_time}}</view>
						</view>
						<view class="m-log-info-r">
							<view class="money" :class="[item.way_text=='收入' ? 'f-log-plus' : 'f-log-minus']">{{item.way_text=='收入' ? '+'+item.money : '-'+item.money}}</view>
							<view class="havemoney">余额:{{item.havemoney}}</view>
						</view>
					</view>
				</view>
            </view>
        </view>
		<!-- 明细弹出 -->
        <view class="g-frame-mask" v-if="isDeital" @tap.stop="closeDeital"></view>
		<view class="item-deital" v-if="isDeital">
			<view class="order-title" v-if="deitalInfo.order_no">订单号：{{deitalInfo.order_no}}</view>
			<view class="order-deital">
				<view class="fex"><text class="name">{{popheadText}}：</text><text class="text price">{{deitalInfo.way == 1 ? '+'+ deitalInfo.money : '-'+ deitalInfo.money}}</text></view>
				<view class="fex"><text class="name">账单类型：</text><text class="text">{{deitalInfo.type_text}}</text></view>
				<view class="fex"><text class="name">账户类型：</text><text class="text">{{deitalInfo.account_type_text}}</text></view>
				<view class="fex"><text class="name">状态：</text><text class="text">{{deitalInfo.way_text}}</text></view>
				<view class="fex"><text class="name">账单状态：</text><text class="text">{{deitalInfo.is_accept_text}}</text></view>
				<view class="fex"><text class="name">购买时间：</text><text class="text">{{deitalInfo.create_time}}</text></view>
				<view class="fex" v-if="deitalInfo.remark"><text class="name">备注：</text><text class="text">{{deitalInfo.remark}}</text></view>
			</view>
			<view class="deital-close" @tap="closeDeital">
			    <close size="40" color="#ffffff"></close>
			</view>
		</view>
		<!-- 筛选弹出 -->
		<view class="g-frame-mask" v-if="showPopup" @tap.stop="togglePopup"></view>
		<view class="g-frame" v-if="showPopup">
		    <view class="m-frame-header">
		        <view class="u-frame-title">{{popheadText}}</view>
		        <image class="u-frame-close" src="../../static/icons/ydt/close.png" mode="widthFix" @tap="togglePopup"></image>
		    </view>
		
		    <view class="m-frame-content">
		        
				<view class="m-frame-detail m-frame-category">
					<view class="m-frame-date-box-t">
						<view class="u-frame-date-line"></view>
						<view class="u-frame-date-title">类别</view>
					</view>
					<view class="m-frame-date-box-bottom">
						<view class="m-date-l f-one-ellipsis f-border1px" v-for="(item,index) in moneytypeList" :key="index" :class="sendData.type == index ? 'u-category-act' : ''"
							@tap="setParam('type',index)">
							<view class="u-category">{{item}}</view>
						</view>
					</view>
				</view>
				
				<view class="m-frame-detail m-frame-category">
					<view class="m-frame-date-box-t">
						<view class="u-frame-date-line"></view>
						<view class="u-frame-date-title">收入支出</view>
					</view>
					<view class="m-frame-date-box-bottom">
						<view class="m-date-l f-one-ellipsis f-border1px " :class="sendData.way == '1' ? 'u-category-act' : ''"
							@tap="setParam('way','1')">
							<view class="u-category">收入</view>
						</view>
						<view class="m-date-l f-one-ellipsis f-border1px" :class="sendData.way == '0' ? 'u-category-act' : ''"
							@tap="setParam('way','0')">
							<view class="u-category">支出</view>
						</view>
					</view>
				</view>
				<view class="m-frame-detail m-frame-category">
					<view class="m-frame-date-box-t">
						<view class="u-frame-date-line"></view>
						<view class="u-frame-date-title">类型排序</view>
					</view>
					<view class="m-frame-date-box-bottom">
						<view class="m-date-l f-one-ellipsis f-border1px" :class="sendData.sort == 'money' ? 'u-category-act' : ''"
							@tap="setParam('sort','money')">
							<view class="u-category">按金额</view>
						</view>
						<view class="m-date-l f-one-ellipsis f-border1px" :class="sendData.sort == 'create_time' ? 'u-category-act' : ''"
							@tap="setParam('sort','create_time')">
							<view class="u-category">按时间</view>
						</view>
					</view>
				</view>
				<view class="m-frame-detail m-frame-category">
					<view class="m-frame-date-box-t">
						<view class="u-frame-date-line"></view>
						<view class="u-frame-date-title">升/降序</view>
					</view>
					<view class="m-frame-date-box-bottom">
						<view class="m-date-l f-one-ellipsis f-border1px" :class="sendData.order == 'asc' ? 'u-category-act' : ''"
							@tap="setParam('order','asc')">
							<view class="u-category">升序</view>
						</view>
						<view class="m-date-l f-one-ellipsis f-border1px" :class="sendData.order == 'desc' ? 'u-category-act' : ''"
							@tap="setParam('order','desc')">
							<view class="u-category">降序</view>
						</view>
					</view>
				</view>
		        
		    </view>
			<view class="m-frame-footer">
			    <view class="u-reset" @tap="rest">重置</view>
				<view class="u-confirm" @tap="confirm()">确定</view>
			</view>
		</view>
		
		<view class="m-b-loading" v-if="showLoading">
		    <image src="../../static/images/loading2.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
        <view class="m-no-data" v-if="showNodata">
            <image src="../../static/images/no_data.png" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
	import jewel from '@/common/common_zb.js';
    export default {
        data() {
            return {
                showLoading: false,
                showNodata: false,
				showPopup: false,
                data: [],
                type: 4,
				total_pages:1,
				isDeital: false,
				deitalInfo:[],
				page:1,
				loadData:{},
				popheadText:'恒朗宝',
				moneytypeList:[],
				sendData: {
				    type: '',
				    way: '',
				    sort: '',
				    order: '',
				    page: 1,
					state:''
				},
				loadType:'',
				youInfo:{}
            };
        },
        methods: {
			togglePopup(){
				this.showPopup = !this.showPopup
			},
			showDeital(id) {
				let that = this
				that.isDeital = true
				for (let i = 0; i < that.data.length; i++) {
					if(that.data[i].id == id){
						that.deitalInfo = that.data[i]
					}
				}
			},
			closeDeital() {
				this.isDeital = false;
			},
            request(type) {
				let that = this
				if(that.page <= that.total_pages){
					that.sendData.page = that.page
					that.showLoading = true;
					henglang.get('member/getMoneyLog2',that.sendData,true,function(res){
						that.showLoading = false;
						if (res.data.data.length === 0 || !res.data.data.length) { 
							that.showNodata = true;
							that.data = []
						}else{
							that.showNodata = false;
							if (type == 'plus') {
								that.data = that.data.concat(res.data.data);
							} else {
								that.data = []
								that.data = res.data.data;
								that.total_pages = res.data.total_pages;
							}
						}
					});
				}
            },
			// 重置
			rest(){
				this.sendData = {
				    type: '',
				    way: '',
				    sort: '',
				    order: '',
				    page: 1,
					state:''
				}
			},
			setParam(key, val) {
			    this.sendData[key] = val;
			},
			confirm() {
				let that = this
				that.page = that.total_pages = that.sendData.page = 1
				that.request();
				that.togglePopup();
			}
        },
        onReachBottom() {
			this.page += 1;
			this.request('plus');
        },
        onLoad(option) {
			let that = this
            that.sendData.state = option.state;
			henglang.post('member/getMoneyLogType',{state:that.sendData.state},true,function(res){
				that.moneytypeList=res.data.data;
			})
			henglang.get('Transfer/getSubstitution',{}, true, function(res) {
				let resdata = res.data;
				resdata.data.forEach((item,index)=>{
					if(item.id == option.state){
						uni.setNavigationBarTitle({
							title: item.name +'明细'
						})
						that.popheadText=item.name
					}
				})
			});
			that.request()
			if(option.state == 8){
				jewel.post('Lottery/total_info',{},true,function(res){
					that.youInfo = res.data.data;
				})
			}
        },
		onNavigationBarButtonTap(e) {
		    if (e.index == 0) {
				this.togglePopup()
		    }
		}
    }
</script>
